<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件中的data</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <p>================</p>
        <com1></com1>
        <com1></com1>
        <com1></com1>
        <com1></com1>
        <com1></com1>
    </div>

    <template id="temp1">
        <div>
            <!-- 暂时：组件不能使用vue中的data -->
            <!-- <p>{{msg}}</p> -->
            <button @click="addCount">count+1 {{count}}</button>
            <com2></com2>
        </div>
    </template>
</body>
<script src='../../vue文件/vue.js'></script>
<script>
    let obj1 = {
                msg:'组件内部的msg'
        } 

    let obj2 = {
        count:0
    }


    Vue.component('com1',{
        template:'#temp1',
        data(){
            // 必须有返回值 ，返回值必须是对象
            return {
                count:0
            }
        },
        methods:{
            addCount(){
                this.count++
            } 
        },
        filters:{},
        computed:{},
        components:{
            com2:{
                template:'<div>组件内部的组件</div>'
            }
        }
    })


    let obj ={
             msg:'hello vue.js'
        }

    let vm = new Vue({
        el: '#app',
        data: obj,
        methods: {}
    })
</script>
</html>